<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>POST请求</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            ul {
                list-style: none;
            }

            ul {
                width: 500px;
                border: 5px solid #ec3483;
                margin: 100px auto 0;
            }

        </style>
    </head>
    <body>

        <ul>
            <!--<li>-->
                <!--<h2></h2>-->
                <!--<p class="text"></p>-->
                <!--<p class="ct"></p>-->
            <!--</li>-->
        </ul>

    </body>
</html>
<script>

    var xhr = new XMLHttpRequest();
    var url = "http://route.showapi.com/341-1";
//    var result;
    xhr.onreadystatechange = function() {

        if (this.readyState == 4 && this.status == 200) {

            console.log(this.responseText);
            // 展示数据
            showData(this.responseText);

        }
    };
    xhr.open("POST", url);

    // 请求头设置
    // x-www-form-urlencoded: 以form表单的参数形式对所有参数进行编码, 参数形式为(name=xiaoming&age=29&page=20)
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    var str = "showapi_appid=35585&showapi_sign=249e47ff8d5e4bf7b44d55a42e0163ef&page=1&maxResult=40";
    xhr.send(str);

//    console.log(result);

    var ul = document.querySelector('ul');
    function showData(JSON_str) {
        var result = JSON.parse(JSON_str);
        if (result['showapi_res_error']) return;

        var body = result["showapi_res_body"];
        var contentlist = body["contentlist"];

        contentlist.forEach(function (ele, p2, p3) {
            var li = document.createElement("li");
            var h2 = document.createElement("h2");
            var textP = document.createElement("p");
            textP.className = "text";
            var ctP = document.createElement("p");
            ctP.className = "ct";
            li.appendChild(h2);
            li.appendChild(textP);
            li.appendChild(ctP);
            ul.appendChild(li);

            h2.innerHTML = ele.title;
            textP.innerHTML = ele.text;
            ctP.innerHTML = ele.ct;


        });

    }



</script>